<!--分页-->
<template>
  <el-pagination
    v-if="total > 1"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5, 10, 20, 30]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>
<script>
  export default {
    name: 'pagination',
    props: {
      // 总页数
      total: {
        // 总条目数
        required: false, // 是否必须
        type: Number,
        default: 0 // 默认值
      },
      // 当前页
      currentPage: {
        type: Number,
        default: 0
      },
      // 每页显示条数
      pageSize: {
        type: Number,
        default: 5
      }
    },
    computed: {},
    watch: {},
    data () {
      return {
        page: {
          pageSize: this.pageSize,
          currentPage: this.currentPage
        }
      }
    },
    methods: {
      // 每页显示数据量变更
      handleSizeChange: function (val) {
        this.page.pageSize = val
        this.$emit("pageChange", this.page)
      },
      // 页码变更
      handleCurrentChange: function (val) {
        this.page.currentPage = val
        this.$emit("pageChange", this.page)
      }
    }
  }
</script>
